<template>
  <div class="wardrobe-container">
    <!-- 顶部导航栏 -->
    <div class="navbar glass-effect">
      <div class="navbar-content">
        <div class="brand">
          <svg viewBox="0 0 40 40" class="brand-logo">
            <defs>
              <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" style="stop-color:#ec4899;stop-opacity:1" />
                <stop offset="50%" style="stop-color:#d946ef;stop-opacity:1" />
                <stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:1" />
              </linearGradient>
            </defs>
            <path d="M20 4 L36 12 L36 28 L20 36 L4 28 L4 12 Z" 
                  fill="url(#logoGradient)" stroke="white" stroke-width="1"/>
            <circle cx="20" cy="16" r="3" fill="white"/>
            <rect x="17" y="20" width="6" height="12" rx="1" fill="white"/>
          </svg>
          <h1 class="brand-name gradient-text">我的衣橱</h1>
        </div>
        <div class="nav-actions">
          <el-button 
            @click="$router.push('/tryon')" 
            :icon="MagicStick"
            class="nav-btn"
          >
            开始试衣
          </el-button>
          <el-button 
            @click="$router.push('/history')" 
            :icon="Clock"
            class="nav-btn"
          >
            历史记录
          </el-button>
        </div>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <div class="content-wrapper">
        <!-- 标签页切换 -->
        <el-tabs v-model="activeTab" class="wardrobe-tabs" @tab-change="handleTabChange">
          <!-- 衣服库 -->
          <el-tab-pane label="衣服库" name="garments">
            <template #label>
              <span class="tab-label">
                <el-icon><Goods /></el-icon>
                <span>衣服库</span>
                <el-badge :value="garments.length" class="tab-badge" />
              </span>
            </template>

            <div class="tab-content">
              <!-- 操作栏 -->
              <div class="action-bar">
                <div class="filter-group">
                  <el-select 
                    v-model="garmentTypeFilter" 
                    placeholder="全部类型" 
                    clearable
                    @change="loadGarments"
                    class="filter-select"
                  >
                    <el-option label="全部类型" value="" />
                    <el-option label="上衣" value="upper" />
                    <el-option label="裤子" value="lower" />
                    <el-option label="连衣裙" value="dress" />
                    <el-option label="外套" value="coat" />
                    <el-option label="配饰" value="accessories" />
                  </el-select>
                </div>
                <el-button 
                  type="primary" 
                  :icon="Plus"
                  @click="showAddGarmentDialog"
                >
                  添加衣服
                </el-button>
              </div>

              <!-- 衣服网格 -->
              <div v-if="garments.length > 0" class="items-grid">
                <div 
                  v-for="garment in garments" 
                  :key="garment.id" 
                  class="item-card"
                >
                  <div class="item-image">
                    <img :src="garment.imageUrl" :alt="garment.garmentName || '服装'" />
                    <div class="item-overlay">
                      <el-button 
                        circle 
                        :icon="View"
                        @click="viewGarment(garment)"
                      />
                      <el-button 
                        circle 
                        :icon="Edit"
                        @click="editGarment(garment)"
                      />
                      <el-button 
                        circle 
                        type="danger"
                        :icon="Delete"
                        @click="deleteGarment(garment)"
                      />
                    </div>
                    <div class="item-type-badge">
                      {{ getGarmentTypeLabel(garment.garmentType) }}
                    </div>
                  </div>
                  <div class="item-info">
                    <h3 class="item-title">{{ garment.garmentName || '未命名' }}</h3>
                    <p v-if="garment.remarks" class="item-desc">{{ garment.remarks }}</p>
                    <div class="item-meta">
                      <span v-if="garment.color" class="meta-tag">
                        <el-icon><Histogram /></el-icon>
                        {{ garment.color }}
                      </span>
                      <span v-if="garment.brand" class="meta-tag">
                        <el-icon><StarFilled /></el-icon>
                        {{ garment.brand }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 空状态 -->
              <div v-else class="empty-state">
                <el-icon class="empty-icon"><Goods /></el-icon>
                <h3>还没有添加衣服</h3>
                <p>点击上方按钮添加您的第一件衣服吧</p>
              </div>
            </div>
          </el-tab-pane>

          <!-- 形象库 -->
          <el-tab-pane label="形象库" name="persons">
            <template #label>
              <span class="tab-label">
                <el-icon><Avatar /></el-icon>
                <span>形象库</span>
                <el-badge :value="persons.length" class="tab-badge" />
              </span>
            </template>

            <div class="tab-content">
              <!-- 操作栏 -->
              <div class="action-bar">
                <div></div>
                <el-button 
                  type="primary" 
                  :icon="Plus"
                  @click="showAddPersonDialog"
                >
                  添加形象
                </el-button>
              </div>

              <!-- 形象网格 -->
              <div v-if="persons.length > 0" class="items-grid">
                <div 
                  v-for="person in persons" 
                  :key="person.id" 
                  class="item-card"
                >
                  <div class="item-image">
                    <img :src="person.imageUrl" :alt="person.personName || '形象照片'" />
                    <div class="item-overlay">
                      <el-button 
                        circle 
                        :icon="View"
                        @click="viewPerson(person)"
                      />
                      <el-button 
                        circle 
                        :icon="Edit"
                        @click="editPerson(person)"
                      />
                      <el-button 
                        circle 
                        type="danger"
                        :icon="Delete"
                        @click="deletePerson(person)"
                      />
                    </div>
                    <div v-if="person.isDefault === 1" class="default-badge">
                      <el-icon><Check /></el-icon>
                      默认
                    </div>
                  </div>
                  <div class="item-info">
                    <h3 class="item-title">{{ person.personName || '未命名形象' }}</h3>
                    <p v-if="person.remarks" class="item-desc">{{ person.remarks }}</p>
                    <div class="item-actions">
                      <el-button 
                        v-if="person.isDefault !== 1"
                        size="small" 
                        @click="setDefaultPerson(person)"
                      >
                        设为默认
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 空状态 -->
              <div v-else class="empty-state">
                <el-icon class="empty-icon"><Avatar /></el-icon>
                <h3>还没有添加形象</h3>
                <p>点击上方按钮添加您的照片吧</p>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- 添加/编辑衣服对话框 -->
    <el-dialog 
      v-model="garmentDialogVisible" 
      :title="isEditMode ? '编辑衣服' : '添加衣服'"
      width="500px"
      :fullscreen="isMobile"
      class="wardrobe-dialog"
    >
      <el-form :model="garmentForm" label-width="80px">
        <el-form-item label="衣服图片">
          <el-upload
            class="upload-demo"
            drag
            :http-request="uploadGarmentImage"
            :before-upload="beforeUpload"
            :show-file-list="false"
          >
            <div v-if="!garmentForm.imageUrl" class="upload-placeholder">
              <el-icon class="upload-icon"><UploadFilled /></el-icon>
              <div class="upload-text">点击或拖拽上传</div>
            </div>
            <div v-else class="upload-preview">
              <img :src="garmentForm.imageUrl" alt="预览" />
            </div>
          </el-upload>
        </el-form-item>
        
        <el-form-item label="衣服类型" required>
          <el-select v-model="garmentForm.garmentType" placeholder="请选择类型">
            <el-option label="上衣" value="upper" />
            <el-option label="裤子" value="lower" />
            <el-option label="连衣裙" value="dress" />
            <el-option label="外套" value="coat" />
            <el-option label="配饰" value="accessories" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="名称">
          <el-input v-model="garmentForm.garmentName" placeholder="如：红色卫衣" />
        </el-form-item>
        
        <el-form-item label="颜色">
          <el-input v-model="garmentForm.color" placeholder="如：红色" />
        </el-form-item>
        
        <el-form-item label="品牌">
          <el-input v-model="garmentForm.brand" placeholder="如：Nike" />
        </el-form-item>
        
        <el-form-item label="备注">
          <el-input 
            v-model="garmentForm.remarks" 
            type="textarea" 
            :rows="3"
            placeholder="添加一些备注信息..." 
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="garmentDialogVisible = false">取消</el-button>
        <el-button 
          type="primary" 
          @click="saveGarment"
          :disabled="!garmentForm.garmentType || !garmentForm.imageUrl"
        >
          保存
        </el-button>
      </template>
    </el-dialog>

    <!-- 添加/编辑形象对话框 -->
    <el-dialog 
      v-model="personDialogVisible" 
      :title="isEditMode ? '编辑形象' : '添加形象'"
      width="500px"
      :fullscreen="isMobile"
      class="wardrobe-dialog"
    >
      <el-form :model="personForm" label-width="80px">
        <el-form-item label="照片">
          <el-upload
            class="upload-demo"
            drag
            :http-request="uploadPersonImage"
            :before-upload="beforeUpload"
            :show-file-list="false"
          >
            <div v-if="!personForm.imageUrl" class="upload-placeholder">
              <el-icon class="upload-icon"><UploadFilled /></el-icon>
              <div class="upload-text">点击或拖拽上传</div>
            </div>
            <div v-else class="upload-preview">
              <img :src="personForm.imageUrl" alt="预览" />
            </div>
          </el-upload>
        </el-form-item>
        
        <el-form-item label="名称">
          <el-input v-model="personForm.personName" placeholder="如：全身照、半身照" />
        </el-form-item>
        
        <el-form-item label="备注">
          <el-input 
            v-model="personForm.remarks" 
            type="textarea" 
            :rows="3"
            placeholder="添加一些备注信息..." 
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="personDialogVisible = false">取消</el-button>
        <el-button 
          type="primary" 
          @click="savePerson"
          :disabled="!personForm.imageUrl"
        >
          保存
        </el-button>
      </template>
    </el-dialog>

    <!-- 查看详情对话框 -->
    <el-dialog 
      v-model="viewDialogVisible" 
      title="详情"
      width="600px"
      :fullscreen="isMobile"
      class="wardrobe-dialog"
    >
      <div v-if="currentItem" class="view-dialog-content">
        <img :src="currentItem.imageUrl" class="view-image" />
        <div class="view-info">
          <h3>{{ currentItem.garmentName || currentItem.personName || '未命名' }}</h3>
          <p v-if="currentItem.remarks">{{ currentItem.remarks }}</p>
        </div>
      </div>
    </el-dialog>
    
    <!-- 底部导航 -->
    <BottomNav />
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  MagicStick, 
  Clock, 
  Goods,
  Avatar,
  Plus,
  View,
  Edit,
  Delete,
  UploadFilled,
  Check,
  Histogram,
  StarFilled
} from '@element-plus/icons-vue'
import { useAuthStore } from '@/stores/auth'
import api from '@/composables/useApi'
import BottomNav from '@/components/BottomNav.vue'

const router = useRouter()
const authStore = useAuthStore()

// 检测是否为移动端
const isMobile = ref(window.innerWidth <= 768)

// 监听窗口大小变化
window.addEventListener('resize', () => {
  isMobile.value = window.innerWidth <= 768
})

// 当前标签页
const activeTab = ref('garments')

// 衣服列表
const garments = ref([])
const garmentTypeFilter = ref('')

// 形象列表
const persons = ref([])

// 对话框
const garmentDialogVisible = ref(false)
const personDialogVisible = ref(false)
const viewDialogVisible = ref(false)
const isEditMode = ref(false)
const currentItem = ref(null)

// 表单数据
const garmentForm = ref({
  id: null,
  garmentType: '',
  imageUrl: '',
  garmentName: '',
  color: '',
  brand: '',
  remarks: ''
})

const personForm = ref({
  id: null,
  imageUrl: '',
  personName: '',
  remarks: ''
})

// 用户ID
const userId = computed(() => authStore.user?.id || 1)

// 加载衣服列表
const loadGarments = async () => {
  try {
    const params = {
      userId: userId.value
    }
    if (garmentTypeFilter.value) {
      params.garmentType = garmentTypeFilter.value
    }
    
    const response = await api.get('/tryon/garments', { params })
    garments.value = response.data.garments || []
  } catch (error) {
    console.error('加载衣服列表失败:', error)
    ElMessage.error('加载衣服列表失败')
  }
}

// 加载形象列表
const loadPersons = async () => {
  try {
    const response = await api.get('/tryon/persons', {
      params: { userId: userId.value }
    })
    persons.value = response.data.persons || []
  } catch (error) {
    console.error('加载形象列表失败:', error)
    ElMessage.error('加载形象列表失败')
  }
}

// 标签页切换
const handleTabChange = (tabName) => {
  if (tabName === 'garments') {
    loadGarments()
  } else if (tabName === 'persons') {
    loadPersons()
  }
}

// 显示添加衣服对话框
const showAddGarmentDialog = () => {
  isEditMode.value = false
  garmentForm.value = {
    id: null,
    garmentType: '',
    imageUrl: '',
    garmentName: '',
    color: '',
    brand: '',
    remarks: ''
  }
  garmentDialogVisible.value = true
}

// 显示添加形象对话框
const showAddPersonDialog = () => {
  isEditMode.value = false
  personForm.value = {
    id: null,
    imageUrl: '',
    personName: '',
    remarks: ''
  }
  personDialogVisible.value = true
}

// 文件上传前验证
const beforeUpload = (file) => {
  console.log('📤 上传文件信息:', {
    name: file.name,
    type: file.type,
    size: file.size,
    lastModified: file.lastModified
  })
  
  // 检查文件类型 - 兼容 iPhone HEIC 格式和云端照片
  const validTypes = [
    'image/jpeg',
    'image/jpg', 
    'image/png',
    'image/heic',  // iPhone HEIC 格式
    'image/heif',
    ''  // 某些情况下 type 可能为空（如 iCloud 照片）
  ]
  
  // 通过 MIME 类型或文件扩展名验证
  const isValidType = validTypes.includes(file.type) || 
                     file.name.match(/\.(jpg|jpeg|png|heic|heif)$/i)
  
  if (!isValidType) {
    ElMessage.error('只能上传 JPG/PNG/HEIC 格式的图片！')
    console.error('❌ 不支持的文件类型:', file.type, file.name)
    return false
  }
  
  // 检查文件大小 - 对于云端图片，size 可能为 0，所以只在 size > 0 时检查
  if (file.size > 0) {
    const isLt10M = file.size / 1024 / 1024 < 10
    if (!isLt10M) {
      ElMessage.error('图片大小不能超过 10MB！')
      return false
    }
  } else {
    // 云端图片，显示提示
    console.log('⚠️ 检测到云端图片（size=0），正在下载...')
    ElMessage.info('正在从 iCloud 下载照片，请稍候...')
  }
  
  // 检测实况照片
  if (file.name.toLowerCase().includes('live')) {
    ElMessage.info('检测到实况照片，将使用静态图片部分')
  }
  
  return true
}

// 上传衣服图片
const uploadGarmentImage = async (options) => {
  const { file } = options
  
  try {
    const formData = new FormData()
    formData.append('file', file)
    formData.append('userId', userId.value)
    formData.append('garmentType', garmentForm.value.garmentType || 'upper')
    formData.append('saveToLibrary', 'false') // 暂时不保存，等填写完整信息后再保存
    
    const response = await api.post('/tryon/upload/garment', formData, {
      headers: { 'Content-Type': 'multipart/form-data' }
    })
    
    garmentForm.value.imageUrl = response.data.url
    ElMessage.success('图片上传成功')
  } catch (error) {
    console.error('上传失败:', error)
    ElMessage.error('上传失败，请重试')
  }
}

// 上传形象图片
const uploadPersonImage = async (options) => {
  const { file } = options
  
  try {
    const formData = new FormData()
    formData.append('file', file)
    formData.append('userId', userId.value)
    formData.append('saveToLibrary', 'false') // 暂时不保存，等填写完整信息后再保存
    
    const response = await api.post('/tryon/upload/person', formData, {
      headers: { 'Content-Type': 'multipart/form-data' }
    })
    
    personForm.value.imageUrl = response.data.url
    ElMessage.success('图片上传成功')
  } catch (error) {
    console.error('上传失败:', error)
    ElMessage.error('上传失败，请重试')
  }
}

// 保存衣服
const saveGarment = async () => {
  try {
    if (isEditMode.value) {
      // 更新
      await api.put(`/tryon/garments/${garmentForm.value.id}`, {
        garmentName: garmentForm.value.garmentName,
        garmentType: garmentForm.value.garmentType,
        remarks: garmentForm.value.remarks,
        color: garmentForm.value.color,
        brand: garmentForm.value.brand
      })
      ElMessage.success('更新成功')
    } else {
      // 新建 - 使用已上传的图片URL创建记录
      const createData = {
        userId: userId.value,
        garmentType: garmentForm.value.garmentType,
        imageUrl: garmentForm.value.imageUrl,
        garmentName: garmentForm.value.garmentName || null,
        remarks: garmentForm.value.remarks || null,
        color: garmentForm.value.color || null,
        brand: garmentForm.value.brand || null
      }
      
      await api.post('/tryon/garments/create', createData)
      ElMessage.success('添加成功')
    }
    
    garmentDialogVisible.value = false
    loadGarments()
  } catch (error) {
    console.error('保存失败:', error)
    ElMessage.error('保存失败：' + (error.response?.data?.message || error.message))
  }
}

// 保存形象
const savePerson = async () => {
  try {
    if (isEditMode.value) {
      // 更新
      await api.put(`/tryon/persons/${personForm.value.id}`, {
        personName: personForm.value.personName,
        remarks: personForm.value.remarks
      })
      ElMessage.success('更新成功')
    } else {
      // 新建 - 使用已上传的图片URL创建记录
      const createData = {
        userId: userId.value,
        imageUrl: personForm.value.imageUrl,
        personName: personForm.value.personName || null,
        remarks: personForm.value.remarks || null
      }
      
      await api.post('/tryon/persons/create', createData)
      ElMessage.success('添加成功')
    }
    
    personDialogVisible.value = false
    loadPersons()
  } catch (error) {
    console.error('保存失败:', error)
    ElMessage.error('保存失败：' + (error.response?.data?.message || error.message))
  }
}

// 查看衣服
const viewGarment = (garment) => {
  currentItem.value = garment
  viewDialogVisible.value = true
}

// 编辑衣服
const editGarment = (garment) => {
  isEditMode.value = true
  garmentForm.value = { ...garment }
  garmentDialogVisible.value = true
}

// 删除衣服
const deleteGarment = async (garment) => {
  try {
    await ElMessageBox.confirm('确定要删除这件衣服吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    await api.delete(`/tryon/garments/${garment.id}`)
    ElMessage.success('删除成功')
    loadGarments()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

// 查看形象
const viewPerson = (person) => {
  currentItem.value = person
  viewDialogVisible.value = true
}

// 编辑形象
const editPerson = (person) => {
  isEditMode.value = true
  personForm.value = { ...person }
  personDialogVisible.value = true
}

// 删除形象
const deletePerson = async (person) => {
  try {
    await ElMessageBox.confirm('确定要删除这个形象吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    await api.delete(`/tryon/persons/${person.id}`)
    ElMessage.success('删除成功')
    loadPersons()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

// 设置默认形象
const setDefaultPerson = async (person) => {
  try {
    await api.put(`/tryon/persons/${person.id}/default`, null, {
      params: { userId: userId.value }
    })
    ElMessage.success('设置成功')
    loadPersons()
  } catch (error) {
    console.error('设置失败:', error)
    ElMessage.error('设置失败')
  }
}

// 获取衣服类型标签
const getGarmentTypeLabel = (type) => {
  const labels = {
    upper: '上衣',
    lower: '裤子',
    dress: '连衣裙',
    coat: '外套',
    accessories: '配饰'
  }
  return labels[type] || type
}

// 页面加载时获取数据
onMounted(() => {
  loadGarments()
})
</script>

<style scoped>
.wardrobe-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #fdf2f8 0%, #fae8ff 50%, #f3e8ff 100%);
}

/* 导航栏 - 复用 TryOn 的样式 */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(217, 70, 239, 0.1);
  box-shadow: 0 4px 20px rgba(217, 70, 239, 0.08);
}

.navbar-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.brand-logo {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 2px 8px rgba(217, 70, 239, 0.3));
}

.brand-name {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(135deg, #ec4899, #d946ef, #8b5cf6);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav-actions {
  display: flex;
  gap: 1rem;
}

.nav-btn {
  border-radius: 10px;
}

/* 主内容 */
.main-content {
  padding: 2rem;
}

.content-wrapper {
  max-width: 1400px;
  margin: 0 auto;
}

/* 标签页 */
.wardrobe-tabs {
  background: white;
  border-radius: 24px;
  padding: 2rem;
  box-shadow: 0 10px 40px rgba(217, 70, 239, 0.1);
}

.tab-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tab-badge {
  margin-left: 0.5rem;
}

.tab-content {
  margin-top: 1.5rem;
}

/* 操作栏 */
.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.filter-group {
  display: flex;
  gap: 1rem;
}

.filter-select {
  width: 150px;
}

/* 网格布局 */
.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

.item-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.item-card:hover {
  box-shadow: 0 8px 24px rgba(217, 70, 239, 0.2);
  transform: translateY(-4px);
}

.item-image {
  position: relative;
  width: 100%;
  height: 250px;
  overflow: hidden;
  background: #f5f5f5;
}

.item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.item-card:hover .item-overlay {
  opacity: 1;
}

.item-type-badge,
.default-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.25rem 0.75rem;
  background: rgba(217, 70, 239, 0.9);
  color: white;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
}

.default-badge {
  background: rgba(16, 185, 129, 0.9);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.item-info {
  padding: 1rem;
}

.item-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  color: #1e293b;
}

.item-desc {
  font-size: 0.875rem;
  color: #64748b;
  margin: 0 0 0.75rem 0;
  line-height: 1.5;
}

.item-meta {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: #f1f5f9;
  border-radius: 12px;
  font-size: 0.75rem;
  color: #475569;
}

.item-actions {
  margin-top: 0.75rem;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: #64748b;
}

.empty-icon {
  font-size: 4rem;
  color: #cbd5e1;
  margin-bottom: 1rem;
}

.empty-state h3 {
  font-size: 1.25rem;
  margin: 0 0 0.5rem 0;
  color: #475569;
}

.empty-state p {
  margin: 0;
}

/* 上传区域 */
.upload-demo {
  width: 100%;
}

.upload-demo :deep(.el-upload) {
  width: 100%;
}

.upload-demo :deep(.el-upload-dragger) {
  width: 100%;
  height: 200px;
}

.upload-placeholder {
  text-align: center;
  padding: 2rem;
}

.upload-icon {
  font-size: 3rem;
  color: #d946ef;
  margin-bottom: 1rem;
}

.upload-text {
  font-size: 1rem;
  color: #475569;
}

.upload-preview {
  width: 100%;
  height: 200px;
}

.upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 查看对话框 */
.view-dialog-content {
  text-align: center;
}

.view-image {
  max-width: 100%;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.view-info h3 {
  margin: 0 0 0.5rem 0;
}

.view-info p {
  color: #64748b;
  margin: 0;
}

/* 响应式 */
@media (max-width: 768px) {
  .items-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
  }
  
  .item-image {
    height: 180px;
  }
  
  .navbar-content {
    padding: 1rem;
  }
  
  .nav-actions {
    gap: 0.5rem;
  }
  
  /* 对话框移动端适配 */
  .wardrobe-dialog :deep(.el-dialog) {
    width: 95% !important;
    margin: 5vh auto;
  }
  
  .wardrobe-dialog :deep(.el-dialog__body) {
    padding: 15px;
  }
  
  .wardrobe-dialog :deep(.el-form-item__label) {
    width: 60px !important;
    font-size: 0.875rem;
  }
  
  .wardrobe-dialog :deep(.el-upload-dragger) {
    padding: 20px;
    height: auto;
    min-height: 150px;
  }
  
  .view-dialog-content {
    padding: 0;
  }
  
  .view-image {
    max-width: 100%;
  }
}

/* 超小屏幕 */
@media (max-width: 375px) {
  .wardrobe-dialog :deep(.el-dialog__header) {
    padding: 15px;
  }
  
  .wardrobe-dialog :deep(.el-dialog__footer) {
    padding: 10px 15px;
  }
  
  .wardrobe-dialog :deep(.el-button) {
    padding: 8px 15px;
    font-size: 0.875rem;
  }
  
  .wardrobe-dialog :deep(.el-form-item) {
    margin-bottom: 15px;
  }
}
</style>

